<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>意见邮箱</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/advice/advicesend' }">发布意见</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col>
        <el-steps :active="active" finish-status="success">
          <el-step title="添加意见主题" description="欢迎踊跃指出我们的不足之处."></el-step>
          <el-step title="添加意见内容" description="你的一次小小的指正,都将是我们莫大的进步."></el-step>
          <el-step title="发表意见" description="感谢你的意见,欢迎再次指正."></el-step>
        </el-steps>
      </el-col>
      <el-col class="margintop20">
        <div v-show="active==1" style="width:30%">
          <el-form
            :model="form"
            :rules="rules"
            ref="myform"
            label-width="100px"
            label-position="top"
            class="myform"
          >
            <el-form-item label="意见标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="意见分类" prop="category">
              <el-cascader
                style="width:100%"
                v-model="form.category"
                :options="options"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>

          <el-button type="primary" @click="gotonextone">下一步</el-button>
        </div>
        <div v-show="active==2">
          <quill-editor
            v-model="form.content"
            ref="advisecontent"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            
          ></quill-editor>
          <div class="margintop20">
            <el-button type="danger" @click="active--">上一步</el-button>
            <el-button type="primary" @click="gotonext">下一步</el-button>
          </div>
        </div>
        <div v-show="active==3">
          <el-button type="danger" @click="active--">上一步</el-button>
          <el-button type="success" @click="addtosome">发表意见</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>



<script>
import {advicecatetory} from '@/utils/index';//导入社区用户的意见的分类
import {subadvice} from "@/api"
export default {
    data(){
        return {
            form:{},
            editorOption:{
                theme:'snow',
            },
            active:1,
            options:advicecatetory,
            rules:{
                title:[
                    {required:true,message:'请输入意见标题',trigger:'blur'}
                ],
                category:[
                    {required:true,message:'请选择意见类别',trigger:'change'}
                ],
                // content:[
                //     {required:true,message:'请输入意见内容',trigger:'blur'}
                // ]
            }
        }
    },
    methods:{
        gotonextone(){
           this.$refs.myform.validate(valid=>{
               if(valid){
                   this.active++
               }else{
                   this.$message.error('请填写意见信息')
                   return false
               }
           })
        },
        gotonext(){
            // this.active++
            if(this.form.content){
                this.active++
            }else{
                this.$message.error('请完善意见内容')
                return false
            }
        },
        addtosome(){
            // 发表意见，把用户意见的相关内容发送给后端，后端添加到数据库了
            console.log(this.form);
            subadvice(this.form)
            .then(res=>{
                if(res.type){
                    this.$router.push({name:'advicelist'})
                }else{

                }
            })
            .catch(err=>{

            })

        },
        handleChange(){

        },
        onEditorBlur(){

        },
        onEditorFocus(){

        },
        onEditorChange(){

        },

    },
    mounted(){

    }
}
</script>